<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-Dem</title>
        <script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
        <style type="text/css">
            #app {
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-scene
                :animation="false"
                :timeline="false"
                v-on:load="handleLoad"
                lib-path="./static/libs/cdn/cesium/Cesium.js"
                plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
            >
                <mapgis-3d-terrain-provider :url="demUrl" :v-if="showDem"></mapgis-3d-terrain-provider>
                <mapgis-3d-ogc-wmts-layer
                :base-url="baseUrl"
                :wmts-layer="wmtsLayer"
                :tiling-scheme="tilingScheme"
                :tile-matrix-set="tileMatrixSet"
                :format="format"
                :layer-style="layerStyle"
            >
            </mapgis-3d-ogc-wmts-layer>
            </mapgis-web-scene>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        showDem: false,
                        demUrl: undefined,
                        baseUrl: 'http://t6.tianditu.gov.cn/img_c/wmts?tk=9c157e9585486c02edf817d2ecbc7752',
                        wmtsLayer: 'img',
                        tileMatrixSet: 'c',
                        tilingScheme: 'EPSG:4326',
                        format: 'tiles',
                        layerStyle: {
                            zIndex: 1
                        }
                    };
                },
                methods: {
                    handleLoad(e) {
                        const { component, Cesium } = e;
                        Cesium.Ion.defaultAccessToken =
                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE';
                        const { webGlobe } = component;
                        webGlobe.viewer.camera.setView({
                            direction: { x: 0.4680575394156845, y: -0.8267033643312148, z: 0.31222377744109403 },
                            position: { x: -674271.5790185562, y: 5530042.656916835, z: 3232882.3357299212 }
                        });
                        //构造视图功能管理对象（视图）
                        var sceneManager = new CesiumZondy.Manager.SceneManager({
                            viewer: webGlobe.viewer
                        });
                        //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
                        sceneManager.flyToEx(94.73761648879076, 29.44177452960854, {
                            height: 5900,
                            heading: 60,
                            pitch: -16,
                            roll: 0
                        });

                        this.demUrl = new Cesium.IonResource.fromAssetId(1);
                        this.showDem = true;

                        console.log('地图加初始化完毕！', webGlobe.viewer.camera);
                    }
                }
            });
        </script>
    </body>
</html>
